@import "base";

@mixin flex-cc {
  display: flex;
  justify-content: center;
  align-items: center;
}

body {
  background-color: #222;
  @include flex-cc;
}

.content{
  width: 40vw;
  height: 30vw;
  @include flex-cc;
  .wrap{
    box-sizing: border-box;
    position: relative;
    width: 0;
    height: 0;
    white-space: pre-wrap;
    border-left:2px solid #5cb3c2;
    border-right:2px solid #5cb3c2;
    animation: changeWidth .4s ease-in-out forwards;
    
    @include flex-cc;
    &::after{
      content: '';
      position: absolute;
      box-sizing: border-box;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      border-left:2px solid #fff;
      border-right:2px solid #fff;
    }

    .letter{
      margin-right: 5px;
      transform:scale(0);opacity: 0;
      font: 2em/2.2em Fantasy;
      color: #6cddf0;
      animation: show 0.4s ease-in-out forwards;
    }
    
    .letter_end{
      text-shadow: 0 5px 20px #ff2d51,0 -5px 20px #ff2d51,5px 0 20px #ff2d51,-5px 0 20px #ff2d51;
      margin-right: 5px;
      transform:scale(1);opacity: 1;
      font: 2em/2.2em Fantasy;
      color: #6cddf0;
      animation: blink 3s ease-in-out infinite none;
    }
  }
}

@keyframes show{
  0%{transform:scale(0);opacity: 0;text-shadow: none;}
  50%{transform:scale(.8);opacity: .8;text-shadow: 0 5px 10px #ff2d51,0 -5px 15px #ff2d51,5px 0 10px #ff2d51,-5px 0 10px #ff2d51;}
  100%{transform:scale(1);opacity: 1; text-shadow: 0 5px 20px #ff2d51,0 -5px 20px #ff2d51,5px 0 20px #ff2d51,-5px 0 20px #ff2d51;}
}
@keyframes changeWidth{
  0%{width: 0;height: 0;}
  50%{width: 90%;height: 60px;}
  100%{width: 70%;height: 40px;}
}

@keyframes blink{
  0%{text-shadow: 0 5px 20px #ff2d51,0 -5px 20px #ff2d51,5px 0 20px #ff2d51,-5px 0 20px #ff2d51;}
  50%{text-shadow: 0 10px 30px #ff2d51,0 -10px 30px #ff2d51,10px 0 30px #ff2d51,-10px 0 30px #ff2d51;filter: contrast(2.5);}
  100%{text-shadow: 0 5px 20px #ff2d51,0 -5px 20px #ff2d51,5px 0 20px #ff2d51,-5px 0 20px #ff2d51;}
}